<template>
	<view class="ucenter-page">
		<u-navbar title-size="36" height="42" :border-bottom="false" title="银行卡管理"></u-navbar>
		<view class="content">
			<view class="u-cells">
				<view class="u-cell" v-for="(item,index) in list" :key="index">
					<view class="u-cell-left flex_bd">
						<view class="name">{{item.name}}</view>
						<view class="number">**** **** **** **** <text>{{item.number}}</text></view>
					</view>
					<view class="u-cell-right">
						<button type="default" class="btn">
							<image src="../../static/images/edit.png" mode=""></image>
						</button>
						<button type="default" class="btn">
							<image src="../../static/images/reduce.png" mode=""></image>
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="u-fixed">
			<view class="add-cell" @click="show = true">
				<image src="../../static/images/add.png" class="add-icon" mode=""></image>
				<view class="add-text">添加银行卡</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="popup-content">
				<view class="popup-head">
					<view class="popup-title">
						提现失败
					</view>
					<image src="../../static/images/close.png" class="close" mode="" @click="show = false"></image>
				</view>
				<view class="popup-body">
					<view class="form-cell flex-center">
						<input type="text" value="" placeholder="请填写持卡人姓名" placeholder-style="color:#BFBFBF"
							class="ui-input" />
					</view>
					<view class="form-cell  flex-center">
						<text class="red">*</text>
						<input type="text" value="" placeholder="请填写开户行" placeholder-style="color:#BFBFBF"
							class="ui-input" />
					</view>
					<view class="form-cell  flex-center">
						<text class="red">*</text>
						<input type="text" value="" placeholder="请输入银行卡号" placeholder-style="color:#BFBFBF"
							class="ui-input" />
					</view>
				</view>
				<view class="popup-foot flex-center">
					<view class="flex_bd">
						<button type="default" class="btn">取消</button>
					</view>
					<view class="flex_bd">
						<button type="default" class="btn btn-confirm">确定</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '建设银行',
					number: '4005'
				}, {
					name: '平安银行',
					number: '4005'
				}, {
					name: '招商银行',
					number: '4005'
				}],
				show: false,
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.content {
		padding: 32rpx;
	}

	.u-cell {
		background-color: #fff;
		border-radius: 6rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;

		.u-cell-left {
			.name {
				font-size: 32rpx;
				color: #383842;
				margin-bottom: 14rpx;
			}

			.number {
				font-size: 28rpx;
				color: #303337;
				line-height: 40rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.u-cell-right {
			display: flex;

			.btn {
				width: 48rpx;
				height: 48rpx;
				padding: 0;
				line-height: 1;
				margin-left: 32rpx;
				background-color: transparent;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.u-fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 24rpx;
	}

	.add-cell {
		border: 2rpx dashed #D6DAE3;
		background-color: #fff;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		padding: 44rpx 32rpx;

		.add-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 32rpx;
		}

		.add-text {
			font-size: 28rpx;
			color: #9C9C9C;
		}
	}

	.popup-content {
		.popup-head {
			position: relative;
			padding: 40rpx 32rpx;

			.popup-title {
				font-size: 32rpx;
				color: #303337;
				font-weight: 600;
				display: flex;
				justify-content: center;
				line-height: 40rpx;
			}

			.close {
				width: 48rpx;
				height: 48rpx;
				display: block;
				position: absolute;
				right: 24rpx;
				top: 38rpx;
			}
		}

		.popup-body {
			padding: 0 32rpx;

			.form-cell {
				background-color: #F3F4F6;
				border-radius: 12rpx;
				margin-bottom: 24rpx;
				padding: 0 32rpx;

				.red {
					color: #FD523B;
					font-size: 32rpx;
					margin-right: 10rpx;
				}

				.ui-input {
					font-size: 32rpx;
					height: 100rpx;
				}
			}
		}

		.popup-foot {
			padding: 24rpx 14rpx;

			.btn {
				font-size: 36rpx;
				color: #606366;
				line-height: 96rpx;
				border-radius: 48rpx;
				background-color: #ECEDED;
				margin: 0 10rpx;
			}

			.btn-confirm {
				background-color: #A2C833;
				color: #fff;
			}
		}
	}
</style>
